<template>
  <div :class="['count-box flexbox flex-align-center', disb ? 'count-box-disabled' : '']">
    <div :class="['btn', num <= 1 || onec ? 'btn-disabled' : '']" @click="reduceNum">-</div>
    <el-input
      :class="['input', disb || onec ? 'input-disabled' : '']"
      type="number"
      v-model="num"
      :min="1"
      :step="1"
      :max="maxNum"
      :disabled="disb || onec"
      @change="inputChange"
    ></el-input>
    <div :class="['btn', num >= max || onec ? 'btn-disabled' : '']" @click="addNum">+</div>
    <!-- (e)=>valChange(item,e) -->
    <!-- <el-input-number :class="['num-input',disb?'':'disabled']" :disabled="disb" v-model="num" @change="valChange" :min="1" :max="maxNum" label=""></el-input-number>  -->
  </div>
</template>
<script>
  import { debounce } from '@/static/js/common'
  export default {
    props: {
      max: {
        type: String | Number,
        default: 0
      },
      inputVal: {
        type: String | Number,
        default: 1
      },
      oneClick: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        onec: this.oneClick,
        disb: this.disabled,
        num: this.inputVal,
        maxNum: this.max
      }
    },
    watch: {
      disabled: {
        handler(newVal) {
          this.disb = newVal
        },
        deep: true,
        immated: true
      },
      oneClick: {
        handler(newVal) {
          this.onec = newVal
        },
        deep: true,
        immated: true
      },
      inputVal: {
        handler(newVal) {
          this.num = newVal
        },
        deep: true,
        immated: true
      }
      // 'max':{
      //   handler (newVal) {
      //     this.maxNum=newVal
      //   },
      //   deep:true,
      //   immated:true
      // }
    },
    computed: {},
    created() {},
    methods: {
      valChange() {
        this.$emit('handleChange', this.num)
      },
      reduceNum: debounce(
        function () {
          if (this.disb) return
          if (this.onec) return
          if (this.num <= 1) return
          this.num = this.num - 1
          this.$emit('handleChange', this.num)
        },
        0,
        { leading: true, trailing: false }
      ),
      addNum: debounce(
        function () {
          // 将箭头函数改为普通函数，以保持正确的 this 指向
          if (this.disb) return
          if (this.onec) return
          if (this.num >= this.max) return
          this.num = this.num + 1
          this.$emit('handleChange', this.num)
        },
        0,
        { leading: true, trailing: false }
      ),
      inputChange() {
        if (this.disb) return
        if (this.onec) return
        if (this.num > this.max) {
          this.num = this.max
        }
        if (this.num < 1) {
          this.num = 1
        }
        this.$emit('handleChange', this.num)
      }
    }
  }
</script>
<style lang="less" scoped>
  .count-box {
    box-sizing: border-box;
    width: 104px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    .btn {
      font-weight: 500;
      font-size: 14px;
      color: #262626;
      width: 32px;
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      text-align: center;
      background: @color-ff;
    }
    .btn-disabled {
      color: #cccccc;
      cursor: not-allowed;
    }
    .input {
      position: relative;
      box-sizing: border-box;
      width: 40px;
      height: 32px;
      /deep/.el-input__inner {
        box-sizing: border-box;
        padding: 0 4px;
        width: 40px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: none;
        border-radius: 0;
      }
      /deep/.el-input__inner:focus {
        border: none;
      }
      /deep/input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
      }
      /deep/input[type='number'] {
        -moz-appearance: textfield;
      }
    }
    .input-disabled {
      /deep/.el-input__inner {
        // color: #cccccc;
        // background: #f7f7f7;
      }
    }
    .input::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 32px;
      background: #dcdfe6;
    }
    .input::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 32px;
      background: #dcdfe6;
    }
  }
  .count-box-disabled {
    // background: #f7f7f7;
    border: 1px solid #e5e5e5;
    .btn {
      // color: #cccccc;
      // background: #f7f7f7;
    }
    .input {
      /deep/.el-input__inner {
        // color: #cccccc;
        // background: #f7f7f7;
      }
    }
  }
  .num-input {
    box-sizing: border-box;
    width: 104px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background: @color-ff;
    /deep/ .el-input-number__decrease {
      box-sizing: border-box;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      line-height: 32px;
      background: @color-ff;
    }
    /deep/.el-input-number__decrease:hover {
      color: @theme-color;
    }
    /deep/ .el-input-number__increase {
      box-sizing: border-box;
      top: 0;
      right: 0;
      width: 32px;
      height: 32px;
      line-height: 32px;
      background: @color-ff;
    }
    /deep/.el-input-number__increase:hover {
      color: @theme-color;
    }
    /deep/ .el-input {
      width: 100%;
      line-height: 32px;
      .el-input__inner {
        padding: 0 32px;
        box-sizing: border-box;
        // width: 40px;
        height: 32px;
        border: none;
      }
      .el-input__inner:focus {
        border: none;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .count-box {
      box-sizing: border-box;
      width: 62px;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      .btn {
        font-weight: 500;
        font-size: 12px;
        color: #262626;
        width: 20px;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
        text-align: center;
        background: @color-ff;
      }
      .btn-disabled {
        color: #cccccc;
        cursor: not-allowed;
      }
      .input {
        position: relative;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        /deep/.el-input__inner {
          box-sizing: border-box;
          padding: 0 4px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border: none;
          border-radius: 0;
        }
        /deep/.el-input__inner:focus {
          border: none;
        }
        /deep/input::-webkit-inner-spin-button {
          -webkit-appearance: none !important;
        }
        /deep/input[type='number'] {
          -moz-appearance: textfield;
        }
      }
      .input-disabled {
        /deep/.el-input__inner {
          // color: #cccccc;
          // background: #f7f7f7;
        }
      }
      .input::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 20px;
        background: #dcdfe6;
      }
      .input::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 20px;
        background: #dcdfe6;
      }
    }
    .count-box-disabled {
      // background: #f7f7f7;
      border: 1px solid #e5e5e5;
      .btn {
        // color: #cccccc;
        // background: #f7f7f7;
      }
      .input {
        /deep/.el-input__inner {
          // color: #cccccc;
          // background: #f7f7f7;
        }
      }
    }
    .num-input {
      box-sizing: border-box;
      width: 62px;
      height: auto;
      border-radius: 5px;
      border: @border-1-e5;
      background: @color-ff;
      margin-right: 0px;
      /deep/ .el-input-number__decrease {
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: @color-ff;
      }
      /deep/ .el-input-number__increase {
        box-sizing: border-box;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: @color-ff;
      }
      /deep/ .el-input {
        width: 100%;
        line-height: 20px;
        .el-input__inner {
          padding: 0;
          box-sizing: border-box;
          // width: 40px;
          height: 20px;
          border: none;
          font-size: 12px;
          color: @font-color-26;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .count-box {
      box-sizing: border-box;
      width: 62px;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      .btn {
        font-weight: 500;
        font-size: 12px;
        color: #262626;
        width: 20px;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
        text-align: center;
        background: @color-ff;
      }
      .btn-disabled {
        color: #cccccc;
        cursor: not-allowed;
      }
      .input {
        position: relative;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        /deep/.el-input__inner {
          box-sizing: border-box;
          padding: 0;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border: none;
          border-radius: 0;
        }
        /deep/.el-input__inner:focus {
          border: none;
        }
        /deep/input::-webkit-inner-spin-button {
          -webkit-appearance: none !important;
        }
        /deep/input[type='number'] {
          -moz-appearance: textfield;
        }
      }
      .input-disabled {
        /deep/.el-input__inner {
          // color: #cccccc;
          // background: #f7f7f7;
        }
      }
      .input::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 20px;
        background: #dcdfe6;
      }
      .input::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 20px;
        background: #dcdfe6;
      }
    }
    .count-box-disabled {
      background: #f7f7f7;
      border: 1px solid #e5e5e5;
      .btn {
        // color: #cccccc;
        // background: #f7f7f7;
      }
      .input {
        /deep/.el-input__inner {
          // color: #cccccc;
          // background: #f7f7f7;
        }
      }
    }
    .num-input {
      box-sizing: border-box;
      width: 62px;
      height: auto;
      border-radius: 5px;
      border: @border-1-e5;
      background: @color-ff;
      margin-right: 0px;
      /deep/ .el-input-number__decrease {
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: @color-ff;
      }
      /deep/ .el-input-number__increase {
        box-sizing: border-box;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: @color-ff;
      }
      /deep/ .el-input {
        width: 100%;
        line-height: 20px;
        .el-input__inner {
          padding: 0 4px;
          box-sizing: border-box;
          // width: 40px;
          height: 20px;
          border: none;
          font-size: 12px;
          color: @font-color-26;
        }
      }
    }
  }
</style>
